<template>
  <div>
    <el-cascader
    ref="select"
    clearable
    v-model="value"
    :options="options"
    :props="props"
	@expand-change="handleChange"
	@change="handleChange"
    ></el-cascader>
  </div>
</template>

<script>
import api from "@/api/baseManager/province";
export default {
  name: "areaSelect",
  components: { },
  props:{
      	data: { //父组件 查询对象
        	type: Object,
        	default: {}
      	},
        propsValue:{ //动态传入 修改value属性
          type: String,
          default: "id"
        }
	},
  data() {
    return {
      value:[],
      //props:{"label":"name","value":"id","children":"children"},
      options:[],
      props: {
      	"label":"name","value":this.propsValue,"children":"children",
        checkStrictly: true,
          lazy: true,
          lazyLoad (node, resolve) {
          	let data = node.data
			if(node.level==0){
				api.getProvinceList().then(res=>{
			  		res.data.list.forEach(e=>{ e.children = []; });
			  		this.options = res.data.list;
			  		resolve(res.data.list);
			  	})
			}
          	if(node.level==1){
          		/*if(data.children.length > 0){
		  			resolve(data.children)
		  			return
		  		}*/
		  		api.getListAllCity({provinceId:data.id}).then(res=>{
					res.data.list.forEach(e2=>{ e2.children = []; })
					data.children = res.data.list;
					resolve(res.data.list)
		  		})	
          	}
          	if(node.level==2){
		  		api.getListAllCounty({cityId:data.id}).then(res=>{
		  			res.data.list.forEach(e2=>{ e2.leaf = true; })
					data.children = res.data.list;
					resolve(res.data.list)
		  		})	
          	}
          	/*if(node.level==3){
          		resolve([])
          	}*/
          	
          }
        }

    };
  },
  methods: {
    handleChange(ids,a,b){
    	this.data.areaId = ids;
    	console.log(this.data.areaId)
    	return true
    },
    confirm(){

    }
  }
};
</script>